import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import './styles.css';

const DateSlider = () => {
  const [selectedDate, setSelectedDate] = useState(new Date('2024-01-01'));

  const formatDate = (timestamp) => {
    const date = new Date(Number(timestamp));
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  const handleChange = (values) => {
    setSelectedDate(new Date(Number(values[0])));
  };

  const handleEnd = (values) => {
    console.log('日期滑块结束时的值:', formatDate(values[0]));
    console.log('日期滑块范围:', {
      min: formatDate(new Date('2024-01-01').getTime()),
      max: formatDate(new Date('2024-12-31').getTime()),
      current: formatDate(values[0])
    });
  };

  return (
    <div className="date-slider-container">
      <h2>Date Slider Example</h2>
      <div className="date-display">
        {formatDate(selectedDate.getTime())}
      </div>
      <div className="slider-container">
        <NoUiSlider
          start={[selectedDate.getTime()]}
          connect={[true, false]}
          range={{
            min: new Date('2024-01-01').getTime(),
            max: new Date('2024-12-31').getTime()
          }}
          tooltips={{
            to: (value) => formatDate(value)
          }}
          onChange={handleChange}
          onEnd={handleEnd}
        />
      </div>
    </div>
  );
};

export default DateSlider; 